<template>
    <!-- 1.遍历数组/集合 -->
    <ul>
        <!-- 
        hobby:迭代变量
        hobbies:需要遍历的数组/集合
    -->
        <li v-for="hobby in hobbies">{{ hobby }}</li>
    </ul>

    <!-- 2.遍历对象中的属性 -->
    <ul>
        <li v-for="attr in user">{{ attr }}</li>
    </ul>

    <!-- 3.遍历对象集合/数组 -->
    <table border="1">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </table>

    <!-- 4.循环数字,相当于for(int i = 1; i <= num; i++) -->
    <ul>
        <li v-for="i in num">{{ i }}</li>
    </ul> 
    
</template>
<script setup>
import { reactive, ref } from 'vue';

const hobbies = ref(['吃饭', '睡觉', '打豆豆'])
const user = reactive({ id: 1, username: 'admin', password: '123456' })
const users = ref([{
    id: 1,
    username: 'admin',
    password: '111111'
}, {
    id: 2,
    username: 'jack',
    password: '222222'
}, {
    id: 3,
    username: 'tom',
    password: '333333'
}, {
    id: 4,
    username: 'lucy',
    password: '444444'
}])
const num = 10;
</script>